<#assign title="login">
<#include "/frag.head.ftl">
  <style>
    .starter-template {
      padding: 75px 15px;
    }

    .submit {
      width: 100%;
    }

    .tab-content .panel {
      border-top: none;
    }

    .nav-tabs > li {
      width: 50%;
    }

    .nav-tabs > li > a {
      font-size: 18px;
      text-align: center;
    }
  </style>
  <div class="starter-template">

    <div id="theshow" class="alert alert-danger" role="alert" style="display: none">

    </div>

    <div class="row">
      <div class="col-sm-5 pull-right new-session-forms-container">

        <ul class="nav nav-tabs" id="thetab">
          <li role="presentation" class="active"><a href="#signin" role="tab" data-toggle="tab">SignIn</a></li>
          <li role="presentation"><a href="#signup" role="tab" data-toggle="tab">SignUp</a></li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade in active" id="signin">
            <div class="panel panel-default">
              <div class="panel-body">
                <form id="signInForm" onsubmit="return mySubmit(false)">
                  <div class="form-group">
                    <label for="login_name">Login name</label>
                    <input type="text" class="form-control" id="login_name" name="login_name" required="true" minlength="5" maxlength="50">
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="login_password" name="login_password" required="true" minlength="5" maxlength="50">
                  </div>
                  <div class="checkbox">
                    <label>
                      <input id="remember_me" type="checkbox"> rememberMe
                    </label>
                  </div>
                  <button type="submit" class="btn btn-primary submit">SignIn</button>
                </form>
              </div>
            </div>
          </div>

          <div role="tabpanel" class="tab-pane fade" id="signup">
            <div class="panel panel-default">
              <div class="panel-body">
                <form id="signUpForm" onsubmit="return mySubmit(false)">
                  <div class="form-group">
                    <label for="signup_name">Login name</label>
                    <input type="text" class="form-control" id="signup_name" name="signup_name" minlength="5" maxlength="50">
                  </div>
                  <div class="form-group">
                    <label for="signup_pwd">Password</label>
                    <input type="password" class="form-control" id="signup_pwd" name="signup_pwd">
                  </div>
                  <div class="form-group">
                    <label for="signup_pwd2">Repeat</label>
                    <input type="password" class="form-control" id="signup_pwd2" name="signup_pwd2">
                  </div>
                  <button type="submit" class="btn btn-primary submit">SignUp</button>
                </form>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col-sm-7 brand-holder pull-left">
        <h1>
          LETO Configuration Center
        </h1>
        <h3>Leto Is a distributed configuration management. </h3>
        <p>
          used to centralize the governance of different environments, clusters, and machines
        </p>
      </div>
    </div>
  </div>
<#include "/frag.foot.ftl">
<script>
  function mySubmit(flag) {
    return flag;
  }

  $(document).ready(function () {
    $('#thetab a[href = "#signin"]').tab('show');

    $("#signInForm").submit(function () {
      $(this).attr("disabled", true);

      $.ajax({
        url: '/user/signin.json',
        type: "post",
        data: {
          login_name: $('#login_name').val(),
          login_password: $('#login_password').val(),
          remember_me: $('#remember_me').prop("checked")
        },
        async: false,
        dataType: "json",
        success: function (root) {
          if (root.success) {
            window.location.href = root.href;
          } else {
            $("#login").attr("disabled", false);
            showError(root.msg);
          }
        },
        error: function (e) {
          $("#login").attr("disabled", false);
          showError(e.toString());
        }
      });
    });

    $("#signUpForm").submit(function () {
      $(this).attr("disabled", true);

      $.ajax({
        url: '/user/signup.json',
        type: "post",
        data: {
          signup_name: $('#signup_name').val(),
          signup_pwd: $('#signup_pwd').val()
        },
        async: false,
        dataType: "json",
        success: function (root) {
          if (root.success) {
            window.location.href = root.href;
          } else {
            $("#login").attr("disabled", false);
            showError(root.msg);
          }
        },
        error: function (e) {
          $("#login").attr("disabled", false);
          showError(e.toString());
        }
      });
    });
  });

  function showError(msg) {
    $('#theshow').html('<strong>错误</strong>&nbsp;' + msg).show();
  }

</script>